import React, { useState } from "react";
import { Toast, NavBar, Search, Swiper, Image } from "react-vant";
import { Contact, BulbO } from "@react-vant/icons";
import { useNavigate } from "react-router-dom";
import ComKnowledgeEncyclopedia from "../../../components/ComKnowledgeEncyclopedia";
import ComConsultationAndConsultation from '../../../components/ComConsultationAndConsultation'
import HealthAssessment from '../../../components/HealthAssessment'
import HealthConsultation from '../../../components/HealthConsultation'
import "./style.css";

const Index: React.FC = () => {
  const navigate = useNavigate();
  const zn = () => {
    navigate("/aiplus");
  };
  const ss=()=>{
    navigate("/search");
  }
  const tx=()=>{
    console.log("头像")
    navigate("/avatar")
  }

  let img=JSON.parse(localStorage.getItem('info')!)
  const [images, setImages] = useState([
    "https://img2.baidu.com/it/u=2881627559,982973073&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500",
    "https://ugc-img.ifengimg.com/img/2021/10/26/fb9409ef-f709-4b20-b062-adfb0fe58dbf_w2500_h1672.jpeg",
    "https://em-lyon.com.cn/upload/editor/image/20220124/20220124174214_93449.png",
    "https://wx4.sinaimg.cn/large/d1534127ly4gsg6t56oc3j20u00k1mz4.jpg",
    "https://www.mfox.cn/images/zhihuizhengfu/zhyl.png",
    "https://img2.baidu.com/it/u=3434244164,3108360944&fm=253&fmt=auto&app=138&f=JPG?w=778&h=500",
    "https://p.cdn-static.cn/32121_15952350562472.jpg?imageView2/2/w/1185/q/75",
    "https://p0.itc.cn/q_70/images01/20210908/15775524e3a44bb5a460090855fa79e4.jpeg",
  ]);
  return (
    <div>
      <div className="home">
        <div className="head">
          <div onClick={()=>tx()}>
            <img src={img} className="tx"/>
          </div>
          <div>
            <input type="txt" placeholder="请输入搜索关键词" onClick={()=>ss()}/>
          </div>
          <div onClick={() => zn()}>
            <BulbO
              onPointerEnterCapture={undefined}
              onPointerLeaveCapture={undefined}
            />
          </div>
        </div>
        <div className="zhut">
          <div className="banner">
            <div className="demo-swiper">
              <Swiper autoplay={3000}>
                {images.map((image) => (
                  <Swiper.Item key={image}>
                    <Image lazyload src={image} />
                  </Swiper.Item>
                ))}
              </Swiper>
            </div>
          </div>
          <div className="KnowledgeEncyclopedia">
            <ComKnowledgeEncyclopedia />
          </div>
          <div className="ConsultationAndConsultation">
            <ComConsultationAndConsultation />
          </div>
          <div><HealthAssessment/></div>
          <div><HealthConsultation/></div>
        </div>
      </div>
    </div>
  );
};
export default Index;
